import { Table, Tag, Space, Pagination,Button, Modal,Upload, message} from 'antd';
import {useState, useEffect} from 'react';
import { InboxOutlined } from '@ant-design/icons';
import axios from 'axios';

const { Dragger } = Upload;

const props1 = {
  name: 'file',
  multiple: true,
  action: 'http://localhost:8080/file',
  // beforeUpload: file => {
  //   if (file.type !== 'image/png') {
  //     message.error(`${file.name} is not a png file`);
  //   }
  //   return file.type === 'image/png' ? true : Upload.LIST_IGNORE;
  // },
  onChange(info) {
    const { status } = info.file;
    if (status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (status === 'done') {
      message.success(`${info.file.name} 上传成功.`);
    } else if (status === 'error') {
      message.error(`请上传小于100M的mp3文件`);
    }
  },
};

const App = (props) => {
  const columns = [
    {
      key: 'nameOfSong',
      title: '歌名',
      dataIndex: 'nameOfSong',
      width: '20%',
    },
    {
      key: 'singer',
      title: '歌手',
      dataIndex: 'singer',
      width: '20%',
    },
    {
      key: 'action',
      title: '操作',
      render: (text, record) => {
        return <>
          <a onClick={()=>{addMusic(record.filePath)}}>播放</a>
          {/* <Divider type={'vertical'} />
          <a>添加歌单</a> */}
        </>
      }
    }
  ];

  const [total, setTotal] = useState(0);
  const [data,setData] = useState([]);
  const [pageNo, setPageNo] = useState(1);
  const [pageSize, setPageSize] = useState(8);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [isVisibleMusic,setIsVisibleMusic] = useState();
  const [count,setCount] = useState(0);

  useEffect(()=>{
    axios.post('http://localhost:8080/tsong/query',{
      pageNo: 1,
      pageSize: 8,
    }).then((res)=>{
      setTotal(res.data.total);
      setData(res.data.rows);
    })
  },[count])

  const onChangePage = (pageNo1, pageSize1) => {
    axios.post('http://localhost:8080/tsong/query',{
      pageNo: pageNo1,
      pageSize: pageSize1,
    }).then((res)=>{
      setTotal(res.data.total);
      setData(res.data.rows);
    })
  }

  const addMusic = (file) => {
    console.log("file",file)
    setIsVisibleMusic(file);
    
  }

  const addModel = () => {
    setIsModalVisible(true);
  }

  const handleOk = () => {
    setIsModalVisible(false);
    setCount(count+1);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
    setCount(count+1);
  };

  return (<>
    <Button type="primary" onClick={addModel}>新增</Button>
    {isVisibleMusic&&(<audio controls>
      <source src={"http://localhost:8080/mp3/"+isVisibleMusic} />
      您的浏览器不支持 audio 元素。
    </audio>)}
    <Modal title="新增歌曲" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
      <Dragger {...props1}>
        <p className="ant-upload-drag-icon">
          <InboxOutlined />
        </p>
        <p className="ant-upload-text">点击或者拖拽上传</p>
        <p className="ant-upload-hint">
          文件格式：歌名-歌手-文件名.mp3
          仅支持上传mp3格式文件
        </p>
      </Dragger>
    </Modal>
    <Table
      columns={columns}
      rowKey={record => record.id}
      dataSource={data}
      pagination={false}
    />
    <Pagination showQuickJumper defaultCurrent={1} total={total} pageSize={pageSize} onChange={onChangePage} />
  </>)
}

export default App;